<template>
  <view>
    <view class="task-info-table" v-if="entities.length">
      <view v-for="(item, index) in entities" class="task-info-row" :key="index">
        <view class="task-info-body">
          <!-- <view>
            <view class="task-info-label">序号</view>
            <view class="task-info-content">{{ index + 1 }}</view>
          </view> -->
          <view>
            <view class="task-info-label">业务编码</view>
            <view class="task-info-content">{{ filterMultiDictText(dictOptions['categoryName'], item.category + '') }}</view>
          </view>
          <view>
            <view class="task-info-label">合同占比（%）</view>
            <view class="task-info-content">{{ item.contractProportion }}</view>
          </view>
          <view>
            <view class="task-info-label">合同分配额（元)</view>
            <view class="task-info-content">{{ item.allocationAmount }}</view>
          </view>
          <view>
            <view class="task-info-label">生产团队</view>
            <view class="task-info-content">{{ filterMultiDictText(dictOptions['teamId'], item.productionTeamId + '') }}</view>
          </view>
          <view>
            <view class="task-info-label">项目负责人</view>
            <view class="task-info-content">{{ filterMultiDictText(dictOptions['empId'], item.projectHead + '') }}</view>
          </view>
        </view>
        <!-- <view class="task-info-action">
          <u-button size="small" type="primary" @click="handleEdit(item, index)">编辑</u-button>
        </view> -->
      </view>
    </view>
    <u-empty v-else mode="data" text="暂无相关数据" icon="/static/empty/data.png"></u-empty>
    <!-- <u-popup :show="popupVisible">
      <u-form
        labelPosition="top"
        class="px-1 pb-2"
        ref="form"
        labelWidth="auto"
        :labelStyle="{
        	fontSize: '14px',
        	color: '#B2B2B2',
        	lineHight: '20px'
        }"
        :modle="editItem"
        :rules="rules"
      >
        <view class="basic-style">
          <u-form-item label="业务编码">
            <u--input disabled :value="editItem.ywfl" />
          </u-form-item>
          <u-form-item label="名称">
            <u--input disabled :value="editItem.ywmc" />
          </u-form-item>
          <u-form-item label="合同占比(%)">
            <u--input type="number" v-number-normal v-model="editItem.htzb" @blur="htzbChange" />
          </u-form-item>
          <u-form-item label="分配合同额(元)">
            <u--input type="number" v-number-normal v-model="editItem.fphte" @blur="fphteChange" />
          </u-form-item>
          <u-form-item label="生产团队">
            <u--input disabled :value="editItem.sctd_dictText" />
          </u-form-item>
          <u-form-item label="团队负责人">
            <u--input disabled :value="editItem.tdfzr_dictText" />
          </u-form-item>
        </view>
        <view class="task-action">
          <u-button type="warning" size="small" @click="handleCancel">取消</u-button>
          <u-button type="primary" size="small" @click="handleConfirm">更新</u-button>
        </view>
      </u-form>
    </u-popup> -->
  </view>
</template>

<script>
import { filterMultiDictText } from '@/utils/JDictSelectUtil.js'

export default {
  name: 'TaskInfo',
  props: {
    entities: {
      type: Array,
      default: () => [],
    },
    bchte: {
      type: [String, Number],
      default: '',
    },
    dictOptions: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      popupVisible: false,
      index: null,
      rules: [],
      editItem: {},
      backItem: {},
      filterMultiDictText,
    }
  },
  methods: {
    handleEdit(item, index) {
      this.popupVisible = true
      this.index = index
      this.backItem = { ...item }
      this.editItem = item
    },
    handleCancel() {
      this.editItem = { ...this.backItem }
      this.entities[this.index] = { ...this.backItem }
      this.popupVisible = false
    },
    handleConfirm() {
      this.popupVisible = false
    },
    htzbChange(value) {
      if (!this.bchte) return false
      let amount = (this.bchte * this.editItem.htzb) / 100
      this.editItem.fphte = Math.round((amount + Number.EPSILON) * 100) / 100
    },

    fphteChange(value) {
      if (!this.bchte) return false
      let rate = (this.editItem.fphte / this.bchte) * 100
      this.editItem.htzb = Math.round((rate + Number.EPSILON) * 100) / 100
    },
  },
}
</script>

<style scoped lang="scss">
.task-info-table {
  border-radius: 12rpx;
  padding: 10rpx 20rpx;
  margin: 20rpx 0;
  border: 1rpx solid #e0e0e0;
  display: grid;
  .task-info-body {
    display: grid;
    // grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 10rpx 20rpx;
    padding: 10rpx 0;
  }
  .task-info-row {
    padding-bottom: 20rpx;
  }
  .task-info-row ~ .task-info-row {
    border-top: 1rpx solid #e0e0e0;
  }
  .task-info-label {
    font-weight: bold;
    color: #666;
  }
  .task-info-content {
    color: #999;
    font-size: 24rpx;
		white-space: pre-line;
		word-wrap: break-word;
		word-break: break-all;
  }
}
.task-action {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rpx;
}
</style>
